.postArticle {		
	.header {
		height: 210px;
		background-color: #3f51b5;
		margin: 0 -240px 30px;
	}
	.container {
		width: 90%;
		margin: 0 auto 100px;
		.asider {
			float: right;
			width: 20%;
		}
		.post {
			overflow: hidden;
			width: 100%;
			margin-top: -135px;
			min-height: 100px;
	    padding: 35px;
	    background: #fff;
	    border-radius: 4px;
	    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	    .postTitle {
	    	font-size: 32px;
	    	line-height: 48px;
	    	font-weight: 400;
	    	color: #212121;
	    }
	    .postMeta {
	    	margin-top: 8px;
	    	margin: 10px 10px;
		    line-height: 14px;
		    font-size: 13px;
		    font-weight: bold;
		    color: #727272;
		    overflow: hidden;
	    }
	    .postContent {
	    	img {
	    		max-width: 698px;
	    	}
	    }
	    .add {
	    	margin-top: 50px;
	    	margin-bottom: 1em;
		    padding: 20px 30px;
		    word-break: break-all;
		    color: #727272;
		    background: #f1f3fa;
		    border-radius: 30px 30px 0;
		    font-size: 16px;
	    }
	    .pageReward {
	    	margin: 60px 0;
    		text-align: center;
    		.content {
    			z-index: 101;
		    	width: 360px;
		    	height: 400px;
		    	position: fixed;
		    	background-color: #fff;
		    	left: 50%;
		    	top: 50%;
		    	transform: translate(-50%, -50%);
		    	.title {
		    		padding: 10px 30px;
		    		font-size: 24px;
		    		font-weight: 700;
		    	}
		    }
    		span {
    			display: inline-block;
    			width: 56px;
			    height: 56px;
			    line-height: 56px;
			    font-size: 20px;
			    color: #fff;
			    background: #f44336;
			    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
			    -webkit-transition: .4s ease-in-out;
			    transition: .4s ease-in-out;
			    border-radius: 50%;
			    cursor: pointer;
    		}
	    }
	    .postFooter {
	    	position: relative;
		    margin: 0 -35px;
		    padding: 20px 35px 0;
		    border-top: 1px solid #ddd;
		    .pageShareWrap {
		    	position: absolute;
			    right: 35px;
			    top: -21px;
			    z-index: 2;
			    .share {
			    	display: block;
				    width: 42px;
				    height: 42px;
				    line-height: 42px;
				    color: #3f51b5;
				    background: #eaecf7;
				    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
				    -webkit-transition: .4s ease-in-out;
				    transition: .4s ease-in-out;
				    border-radius: 50%;
				    cursor: pointer;
				    text-align: center;
				    &:hover {
				    	box-shadow: 0 6px 12px rgba(0,0,0,0.2), 0 4px 15px rgba(0,0,0,0.2);
				    }
			    }
		    }
		    .tagItem {
		    	display: inline-block;
		    	padding: 5px 10px;
		    	margin-right: 15px;
		    	color: #fff;
		    }
	    }
		}
		.comment {
			margin-top: 40px;
	    padding: 30px;
	    background: #fff;
	    box-shadow: 0 0 4px rgba(0,0,0,0.2);
	    border-radius: 4px;
	    .vwrapper {
	    	border: 1px solid #f0f0f0;
		    border-radius: 4px;
		    margin-bottom: 10px;
		    overflow: hidden;
		    position: relative;
		    padding: 10px;
		    line-height: 2;
		    color: #555;
		    -webkit-transition: all .3s ease;
		    transition: all .3s ease;
		    .vheader {
		    	input {
		    		width: 50%;
		    		border-bottom: 1px dashed #dedede;
		    		background-color: transparent;
		    		border: none;
				    resize: none;
				    outline: none;
				    padding: 10px 5px;
				    max-width: 100%;
				    font-size: .775rem;
				    transition: .3s;
				    &:focus {
				    	border-bottom: 1px solid #ff4081;
				    }
		    	}
		    }
		    .veditor {
		    	position: relative;
   			  padding-top: 10px;
   			  textarea {
   			  	width: 100%;
   			  	border: none;
   			  	font-size: .775rem;
   			  	outline: none;
   			  	padding: 10px 5px;
   			  	background-color: transparent;
   			  }
		    }
		    .vbutton {
		    	margin-top: 10px;
		    	span {
		    		display: inline-block;
				    float: right;
				    background: #eee;
				    padding: 3px 16px;
				    cursor: pointer;
				    border-radius: 2px;
				    &:hover {
				    	background-color: #3f51b5;
    					border-color: #3f51b5;
    					color: #eee;
				    }
		    	}
		    }
	    }
	    .vcommentNum {
	    	font-size: .875rem;
		    display: inline-block;
		    width: 50%;
		    vertical-align: middle;
		    span {
		    	margin-left: 15px;
		    	font-weight: 600;
    			font-size: 1.25rem;
		    }
		  }
		}
		.commentWrapper {
			.vcard {
				overflow: hidden;
				margin-top: 20px;
				img {
					width: 3.125rem;
			    height: 3.125rem;
			    float: left;
			    border-radius: 50%;
			    margin-right: .7525rem;
			    border: 1px solid #f5f5f5;
			    padding: .125rem;
				}
				.vright {
					overflow: hidden;
					padding-bottom: .5rem;
	   			border-bottom: 1px dashed #f5f5f5;
	   			margin-left: 20px;
					.vheader {
						position: relative;
				    font-size: .875rem;
				    font-weight: 500;
				    margin-right: .875rem;
				    cursor: pointer;
				    color: #1abc9c;
				    text-decoration: none;
				    display: inline-block;
					}
					.vtime {
						color: #585869;
				    font-size: .75rem;
				    margin-right: .875rem;
				    .reply {
				    	float: right;
				    	color: #ff4081;
				    	cursor: pointer;
				    }
					}
					.vcontent {
						margin: 10px 0;
					}
				}
			}
			.childrenWrapper {
				padding-left: 100px;
				.vcard {
					overflow: hidden;
					margin-top: 20px;
					img {
						width: 3.125rem;
				    height: 3.125rem;
				    float: left;
				    border-radius: 50%;
				    margin-right: .7525rem;
				    border: 1px solid #f5f5f5;
				    padding: .125rem;
					}
					.vright {
						overflow: hidden;
						padding-bottom: .5rem;
		   			border-bottom: 1px dashed #f5f5f5;
		   			margin-left: 20px;
						.vheader {
							position: relative;
					    font-size: .875rem;
					    font-weight: 500;
					    margin-right: .875rem;
					    cursor: pointer;
					    color: #1abc9c;
					    text-decoration: none;
					    display: inline-block;
						}
						.vtime {
							color: #585869;
					    font-size: .75rem;
					    margin-right: .875rem;
					    .reply {
					    	float: right;
					    	color: #ff4081;
					    	cursor: pointer;
					    }
						}
						.vcontent {
							margin: 10px 0;
						}
					}
				}
			}
		}
	}
	.mask {
		position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .3;
    transition: .3s ease-in-out;
    
	}
	.dialog {
		position: fixed;
		left: 50%;
    top: 50%;
    z-index: 101;
    transform: translate(-50%, -50%);
    transition: all 3s ease-out;
		.box {
			width: 500px;
			background-color: #fff;
			border-radius: 10px;
			.title {
				height: 56px;
				padding: 15px 30px;
				font-size: 18px;
				border-bottom: 1px solid #e5e5e5;
			}
			.content {
				padding: 30px;
				.label {
					display: inline-block;
			    max-width: 100%;
			    margin-bottom: 5px;
			    font-weight: 700;
				}
				.input {
					display: block;
			    width: 100%;
			    height: 34px;
			    padding: 6px 12px;
			    margin-bottom: 15px;
			    font-size: 14px;
			    line-height: 1.42857143;
			    color: #555;
			    background-color: #fff;
			    background-image: none;
			    border: 1px solid #ccc;
			    border-radius: 4px;
	        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				}
			}
			.footer {
				height: 56px;
				padding: 10px 30px;
				border-top: 1px solid #e5e5e5;
				.btn {
					display: inline-block;
			    padding: 6px 12px;
			    margin-bottom: 0;
			    font-size: 14px;
			    font-weight: 400;
			    text-align: center;
			    vertical-align: middle;
			    cursor: pointer;
			    border: 1px solid transparent;
			    border-radius: 4px;
			    margin-bottom: 0;
    			margin-left: 5px;
				}
				.cancle {
					float: right;
					color: #000;
					margin-right: 15px;
					background-color: #fff;
    			border-color: #ccc;
				}
				.summit {
					float: right;
					color: #fff;
			    background-color: #337ab7;
			    border-color: #2e6da4;
				}
			}
		}
	}
	@media screen and (max-width: 760px){
		.dialog {
			width: 100%;
	    .box{
	      width: 100%;
	    } 
		}
  }
}